<script setup lang="ts">
import {ref, computed, watch} from "vue";
import {Plus, Settings, Search, Refresh} from "@vicons/tabler";
import type {ISearchSchema, IPagination} from "@/types";


interface IProps {
    columns: any[];
    date: any[];
    loading?: boolean;
    rowKey?: (record: Record<string, any>) => number | string;
    addLabel?: string;
    searchSchema?: ISearchSchema[];
    searchCols?: number;
    pagination?: IPagination;
}


const props = withDefaults(defineProps<IProps>(), {
    loading: false,
    rowKey: (record: Record<string, any>) => record.id,
    addLabel: "添加",
    searchCols: 4,
    pagination: () => ({
        page: 1,
        page_size: 10,
        count: 0
    })
})


interface IEmits {
    (e: "add"): void;

    (e: "search", params: Record<string, any>): void;

    (e: "reset"): void;

    (e: "change-page", page: number): void;

    (e: "change-page-size", page_size: number): void;
}


const emits = defineEmits<IEmits>();


const searchFormRef = ref();
const searchForm = ref();
const defaultSearchForm = ref();


const gridItemCount = computed(() => {
    return props.searchSchema ?
        props.searchCols - props.searchSchema.length :
        props.searchCols
})


watch(() => props.searchSchema, (schema: ISearchSchema[] | undefined) => {
    if (schema) {
        const model: Record<string, any> = {};
        schema.forEach((schema) => {
            model[schema.field] = null;
        })
        searchForm.value = {...model};
        defaultSearchForm.value = {...model};
    }
}, {immediate: true});


/**
 * 添加
 */
const handleAddEmit = () => {
    emits("add");
}


/**
 * 查询
 */
const handleSearchEmit = () => {

}


/**
 * 重置
 */
const handleResetEmit = () => {

}


/**
 * 页码
 */
const handlePageChangeEmit = () => {

}


/**
 * 页数
 */
const handlePageSizeChangeEmit = () => {

}
</script>

<template>
    <div class="common-table">
        <!-- 查询区域 -->
        <div class="search-container">
            <n-card v-if="props.searchSchema" :bordered="false">
                <n-form ref="searchFormRef" label-placement="left" :inline="true" :show-feedback="false">
                    <n-grid :cols="props.searchCols" :x-gap="24">
                        <n-grid-item v-for="schema in props.searchSchema" :key="schema.field">
                            <n-form-item :label="schema.label">
                                <template v-if="schema.type === 'input'">
                                    <n-input
                                        v-model:value="searchForm[schema.field]"
                                        :placeholder="schema.placeholder"
                                        clearable
                                    />
                                </template>

                                <template v-if="schema.type === 'select'">
                                    <n-select
                                        v-model:value="searchForm[schema.field]"
                                        :options="schema.options"
                                        :placeholder="schema.placeholder"
                                        clearable
                                    />
                                </template>

                                <template v-if="schema.type === 'date-picker'">
                                    <n-date-picker
                                        v-model:value="searchForm[schema.field]"
                                        type="datetime"
                                        clearable
                                    />
                                </template>
                            </n-form-item>
                        </n-grid-item>

                        <n-grid-item :span="gridItemCount">
                            <n-space>
                                <n-button type="success" @click="handleSearchEmit">
                                    <template #icon>
                                        <Search/>
                                    </template>
                                    <span>查询</span>
                                </n-button>

                                <n-button @click="handleResetEmit">
                                    <template #icon>
                                        <Refresh/>
                                    </template>
                                    <span>重置</span>
                                </n-button>
                            </n-space>
                        </n-grid-item>
                    </n-grid>
                </n-form>
            </n-card>
        </div>

        <!-- Table区域 -->
        <div class="main-container">
            <n-card :bordered="false">
                <div class="actions">
                    <div class="action-left">
                        <n-button type="success">
                            <template #icon>
                                <Plus/>
                            </template>
                            <span>{{ props.addLabel }}</span>
                        </n-button>
                    </div>


                    <div class="action-right">
                        <n-button secondary circle>
                            <template #icon>
                                <Settings/>
                            </template>
                        </n-button>
                    </div>
                </div>

                <div class="content">
                    <n-data-table
                        :columns="props.columns"
                        :data="props.date"
                        :row-key="props.rowKey"
                        :loading="props.loading"
                    />
                </div>

                <template #footer>
                    <div class="page-container">
                        <n-space justify="end">
                            <n-pagination
                                v-model:page="props.pagination.page"
                                v-model:page-size="props.pagination.page_size"
                                v-model:item-count="props.pagination.count"
                                :page-sizes="[10, 20, 30, 40, 50]"
                                :show-size-picker="true"
                                :show-quick-jumper="true"
                                @update:page="handlePageChangeEmit"
                                @update:page-size="handlePageSizeChangeEmit"
                            >
                                <template #goto>
                                    前往
                                </template>

                                <template #prefix>
                                    共 {{ props.pagination.count }} 条
                                </template>

                                <template #suffix>
                                    页
                                </template>
                            </n-pagination>
                        </n-space>
                    </div>
                </template>
            </n-card>
        </div>
    </div>
</template>

<style lang="scss">
.common-table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;

    .main-container {
        .actions {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>